<template>
	<view class="content">
		<view class="top_bar">
			<view class="d-flex flex-start align-center">
				<view class="d-flex space-between align-center city">
					<view @click="chooseCity" class="cityName">{{city}}</view>
					<image style="width: 11px;height: 7px;" :src="iconPull"></image>
				</view>
				<view class="search">
					<image style="width: 38rpx;height: 38rpx;margin-left: 12rpx;" :src="iconSearch"></image>
					<input type="text" class="input_style" placeholder="你想租什么车？" maxlength="50" placeholder-style="font-size: 28rpx">
				</view>
				<image @click="clickSort" class="sortImg" :style="ascSort?'opacity: 0.6':''" :src="iconSort"></image>
			</view>
		</view>
		<view class="item-list d-flex space-between flex-wrap">
			<view @click="goCarDetail" class="item d-flex flex-direction align-start flex-start" v-for="(item,index) in itemList"
			 :key="index">
				<image class="pic" :src="item.src" mode=""></image>
				<view style="width: 100%;">
					<view class="carName d-flex space-between">
						<text class="carName-name">{{item.name}}</text>
						<text class="point">{{item.point}}分</text>
					</view>
					<view class="liNumAgeTime d-flex space-between" style="margin-top: 15rpx;">
						<text style="margin-right: 12rpx;">{{item.licenseNum}}</text>
						<text style="margin-right: 12rpx;">{{item.carAge}}年</text>
						
					</view>
					<view class="rentTime">
						<text>已租{{item.times}}次</text>
					</view>
					<view class="price">
						<text style="font-size: 32rpx;margin-right: 8rpx;color: #B6914E;">￥ {{item.price}}</text>
						<text style="font-size: 24rpx;color: #666666;" class="unit"> 元/天</text>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="cityChose" type="center">
			<view class="cities" @click="closeCity">
				<view class="cityBox">
					<view class="locateCity">定位城市</view>
					<view class="img-box">
						<view class="img-box-2">
							<image class="locate-img" :src="iconLocate" mode=""></image>
							<view>{{cityList[currentIndex].cityName}}</view>
						</view>
					</view>
					<view class="pop-city-choose">选择城市</view>
					<view class="cityList">
						<view class="list-box" v-for="(item,index) in cityList" :key="index" @click.stop="checkCity(index)">
							<view style="" class="city-item-left">{{item.cityName}}</view>
							<uni-icons :style="index == currentIndex?'opacity: 1;':'opacity: 0;'" class="city-item-right" type="checkmarkempty"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import icons from '../../common/icons.js'
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import uniTag from "@/components/uni-tag/uni-tag.vue"
	import apis from '../../api.js'
	export default {
		components: {
			uniTag,
			uniIcons
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				city:"深圳",
				cityList:[
					{
						cityName:'深圳',
						checked:true
					},
					{
						cityName:'厦门',
						checked:false
					},
					{
						cityName:'成都',
						checked:false
					},
					{
						cityName:'上海',
						checked:false
					},
					{
						cityName:'广州',
						checked:false
					}
				],
				selectList: ['碳纤维', '敞篷', '漏雨', '破洞'],
				cityIndex: 0,
				sDate: currentDate,
				eDate: null,
				carPrice: null,
				selectIndex: 0,
				itemList: [{
						src: icons.icons.picCar,
						name: "法拉利 458",
						point: "4.5",
						price: "45522",
						tagName: "诚信联盟",
						licenseNum: "川A9999",
						carAge: "99",
						times: '8'
					},
					{
						src: icons.icons.picCar,
						name: "法拉利 458",
						point: "4.5",
						price: "45522",
						tagName: "诚信联盟",
						licenseNum: "川A9999",
						carAge: "99",
						times: '8'
					},
					{
						src: icons.icons.picCar,
						name: "法拉利 458",
						point: "4.5",
						price: "45522",
						tagName: "诚信联盟",
						licenseNum: "川A9999",
						carAge: "99",
						times: '8'
					},
					{
						src: icons.icons.picCar,
						name: "法拉利 458",
						point: "4.5",
						price: "45522",
						tagName: "诚信联盟",
						licenseNum: "川A9999",
						carAge: "99",
						times: '8'
					},
					{
						src: icons.icons.picCar,
						name: "法拉利 458",
						point: "4.5",
						price: "45522",
						tagName: "诚信联盟",
						licenseNum: "川A9999",
						carAge: "99",
						times: '8'
					},
					{
						src: icons.icons.picCar,
						name: "法拉利 458",
						point: "4.5",
						price: "45522",
						tagName: "诚信联盟",
						licenseNum: "川A9999",
						carAge: "99",
						times: '8'
					},
					{
						src: icons.icons.picCar,
						name: "法拉利 458",
						point: "4.5",
						price: "45522",
						tagName: "诚信联盟",
						licenseNum: "川A9999",
						carAge: "99",
						times: '8'
					},
				],
				currentIndex:0,
				ascSort:true,
				iconPull:icons.icons.iconPull,
				iconSort:icons.icons.iconSort,
				iconSearch:icons.icons.iconSearch,
				iconLocate:icons.icons.iconLocate,
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad() {
			var that = this;
			uni.getStorage({
				key: 'token',
				success: function(res) {
					console.log(res);
					if (res.data) {
						console.log(res.data)
						that.getCars(res.data);
					}
				},
				fail: function(res) {
					console.log(res)
					uni.reLaunch({
						url: '../login/login'
					})
				}
			});

		},
		methods: {
			cityChange(e) {
				this.cityIndex = e.target.value;
			},
			selectChange(e) {
				this.selectIndex = e.target.value;
			},
			startDateChange(e) {
				this.sDate = e.target.value;
			},
			endDateChange(e) {
				this.eDate = e.target.value;
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			goCarDetail() {
				uni.navigateTo({
					url: "../cardetails/cardetails"
				})
			},
			getCars(token) {
				apis.retrieval({
					token: token
				}).then(res => {
					console.log(res)
					// if(res[1].data.code==401){
					// 	uni.reLaunch({
					// 		url: '../login/login'
					// 	})
					// }
				})
			},
			chooseCity(){
				this.$refs.cityChose.open();
			},
			closeCity(){
				this.$refs.cityChose.close();
			},
			checkCity(index){
				this.currentIndex = index;
			},
			clickSort(){
				this.ascSort = !this.ascSort;
			}
		}
	}
</script>

<style>
	page {
		background-color: #EDEDED;
		display: flex;
		justify-content: center;
	}
</style>
<style scoped>
	.sortImg{
		width: 14px;
		height: 14px;
	}
	.city-item-right{
		color: #B6914E;
		width: 30rpx;
		height: 22rpx;
	}
	.list-box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #E6E9EE;
		padding: 20rpx 0;
		width: 92vw;
	}
	.city-item-left{
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #000000;
	}
	.cityList{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}
	.pop-city-choose{
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		margin: 40rpx 0 20rpx 0;
	}
	.img-box-2{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 150rpx;
		height: 34rpx;
	}
	.img-box{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 200rpx;
		height: 64rpx;
		background: #EDEDED;
		margin-top: 20rpx;
	}
	.locate-img{
		width: 26rpx;
		height: 34rpx;
	}
	.locateCity{
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
	}
	.cityBox{
		width: 92vw;
		margin-top: 20rpx;
	}
	.cities{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		width: 100vw;
		height: 100vh;
		background: #FFFFFF;
	}
	.cityName{
		margin-right: 10rpx;
	}
	.rentTime{
		max-width: 100%;
		margin: 15rpx;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
	}
	.point{
		font-size: 12px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #DC3434;
		margin-right: 15rpx;
	}
	.carName-name {
		color: #292929;
		font-weight: 400;
		font-size: 32rpx;
		margin-right: 15rpx;
		font-family: PingFangSC-Regular, PingFang SC;
	}

	.carName {
		/* margin-top: 15rpx; */
		max-width: 100%;
		margin: 15rpx;
	}

	.unit {
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
	}

	.pic {
		width: 44vw;
		height: 180rpx;
		border-radius: 6px 6px 0px 0px;
	}

	.liNumAgeTime {
		max-width: 100%;
		margin: 15rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #292929;
	}

	.price {
		max-width: 100%;
		margin: 15rpx;
	}

	.flex-wrap {
		flex-wrap: wrap !important;
	}

	.item {
		width: 44vw;
		/* height: 40vh; */
		background: #FFFFFF;
		border-radius: 6px;
		/* padding: 40rpx 20rpx 15rpx 20rpx; */
		margin-bottom: 16rpx;
		margin-top: 16rpx;
	}

	.item-list {
		width: calc(100% - 40rpx);
		margin-top: 100rpx;
	}

	.date {
		width: 100%;
		font-size: 28rpx;
		padding: 15rpx 0;
		margin: 6rpx;
	}

	.align-start {
		align-items: flex-start !important;
	}

	.align-center {
		align-items: center !important;
	}

	.flex-start {
		justify-content: flex-start !important;
	}

	.flex-center {
		justify-content: center !important;
	}

	.flex-direction {
		flex-direction: column !important;
	}

	.d-flex {
		display: flex !important;
	}

	.space-between {
		justify-content: space-between !important;
	}

	.city {
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #171717;
		line-height: 40rpx;
		font-size: 28rpx;
	}

	.picker {
		width: calc(100% - 30rpx);
		background-color: #FFFFFF;
		font-size: 28rpx;
		padding: 0 16rpx;
	}

	.search {
		display: flex;
		width: 70vw;
		align-items: center;
		height: 64rpx;

		border-radius: 18px;
		background-color: #EDEDED;
		padding: 0 4rpx;
		margin: 0 20rpx;
		border: 1px solid #e9e9ea;
	}

	.top_bar {
		position: fixed;
		top: var(--window-top);
		left: 0;
		width: 100vw;
		padding-top: 6rpx;
		padding-bottom: 10rpx;
		background-color: #FFFFFF;
		z-index: 2;

		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom: 1px solid #979797;

	}

	.content {
		display: flex;
		flex: 1;
		flex-direction: column;
		justify-content: center;
		width: calc(100% - 40rpx);
		padding: 0 15rpx;
		align-items: center;
	}

	.input_style {
		width: 100%;
		font-size: 28rpx;
		margin-left: 10rpx;
		color: #171717;
	}
</style>
